<script setup>
import { ref, onMounted, shallowRef } from 'vue'
import { EditorView, basicSetup } from 'codemirror'
import { sql } from '@codemirror/lang-sql'
import { oneDark } from '@codemirror/theme-one-dark'

const editor = shallowRef()
const editorView = shallowRef()
const sqlQuery = ref('')
const queryResult = ref(null)
const error = ref(null)

onMounted(() => {
  editorView.value = new EditorView({
    extensions: [
      basicSetup,
      sql(),
      oneDark,
      EditorView.updateListener.of((update) => {
        if (update.docChanged) {
          sqlQuery.value = update.state.doc.toString()
        }
      })
    ],
    parent: editor.value
  })
})

const executeQuery = async () => {
  try {
    error.value = null
    // 这里添加实际的SQL执行逻辑
    // 示例响应数据
    queryResult.value = {
      columns: ['id', 'name', 'email'],
      rows: [
        { id: 1, name: '张三', email: 'zhangsan@example.com' },
        { id: 2, name: '李四', email: 'lisi@example.com' }
      ]
    }
  } catch (err) {
    error.value = err.message
    queryResult.value = null
  }
}

const clearEditor = () => {
  editorView.value.dispatch({
    changes: {
      from: 0,
      to: editorView.value.state.doc.length,
      insert: ''
    }
  })
  queryResult.value = null
  error.value = null
}
</script>

<template>
  <div class="sql-editor">
    <h1>SQL编辑器</h1>
    
    <div class="toolbar">
      <button @click="executeQuery" class="btn execute">执行查询</button>
      <button @click="clearEditor" class="btn clear">清除</button>
    </div>

    <div class="editor-container" ref="editor"></div>

    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <div v-if="queryResult" class="results">
      <h3>查询结果：</h3>
      <table>
        <thead>
          <tr>
            <th v-for="column in queryResult.columns" :key="column">{{ column }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in queryResult.rows" :key="index">
            <td v-for="column in queryResult.columns" :key="column">
              {{ row[column] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.sql-editor {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.toolbar {
  margin-bottom: 16px;
}

.btn {
  padding: 8px 16px;
  margin-right: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.execute {
  background-color: #4CAF50;
  color: white;
}

.clear {
  background-color: #f44336;
  color: white;
}

.editor-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 16px;
  height: 300px; /* 设置编辑器高度 */
}

.error-message {
  color: #f44336;
  padding: 8px;
  margin-bottom: 16px;
  background-color: #ffebee;
  border-radius: 4px;
}

.results {
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f5f5f5;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f5f5f5;
}

/* 添加 CodeMirror 6 的样式覆盖 */
:deep(.cm-editor) {
  height: 100%;
}

:deep(.cm-scroller) {
  overflow: auto;
}
</style> 